Case Study Process
...

Here are some people in the Twitter design community who are well known for their work in design systems:

@BradFrost: Creator of Atomic Design, a popular approach to design systems.
@joffreyherpin: Senior UX designer at Shopify, where he leads the design system team.
@donsng: Design systems lead at Google, where he works on the Material Design system.
@rachelandrew: Design systems lead at Airbnb, where she works on the Airbnb Design System.
@martinwolf: Design systems lead at Amazon, where he works on the Polaris Design System.
@sarasoueidan: Design systems lead at Figma, where she works on the Figma Design System.
@kathysierra: UX designer and author, who is known for her work on design systems and accessibility.
@amybucher: Design systems lead at Salesforce, where she works on the Lightning Design System.
@lukew: UX designer and author, who is known for his work on design systems and user experience.
@danmall: Design systems lead at Microsoft, where he works on the Fluent Design System.
@twipple: Design systems lead at Atlassian, where he works on the Design System.
@heydonworks: Design systems lead at Intuit, where he works on the Design System.
I hope this list is helpful!

Please note that this is just a sample of people who are well known in the Twitter design community for their work in design systems. There are many other great people out there who are doing great work in this area.

Also talk about how the post got good enough traction

Draft 1
...

Story Structure
...

  1. Whats the problem?
  2. Why's it a problem?
  3. How i solved it

Introduction
...

I love keyboards(show a picture of my keyboards)
i love building them
(showcase my renders, the keyboard project)
my feed is full of them
(show a instagram/pinterest feed full of them)
i have a poster on my wall with a keyboard.
(show the poster on my wall, photoshop it to get light effect and lens flares and stuff)

and i love learning new unique keyboard layouts
(show qwerty leading into a flowchart to colemak, dvorak, arsenito)

i love typing as well,
(put an old video of me typing, and a screenshot of my highscore of wpm and also link an embed of that monkeytype link.)

Why custom keyboards?
...

Pasted image 20231011100906.png

The concept of being a digital weaponsmith is super appealing to me. In any era, having the best tool in your arsenal is a game-changer. The digital era is no different. I've realised I want to build digital tools, that enable the game-changers of this century

The concept that the best warriors dont adapt to their weapon but choose a weapon that suits them the best. In the digital era, our entire lives are on a computer, choosing the best weapon here means to choose the best workspace tools that work the best with you, not the other way around. for me that meant designing those tools myself, for myself with software custom programmed for myself

(refer to the stream design guidelines brief)

show software and hardware (laser cutting) and final output

thats what led me into the realm of custom mechanical keyboards

So when building this custom keyboards, they require custom code, and the functionality behind these keyboards. the purpose is to make hand movement as simple as possible, we do this through layers

Specifically ortholinear keyboards are built around the concept of reducing the maximum amount of movement that is put on your hands, for this we shrink down the keys and put them in layers

(look at that video and how they explain, and also qmk documentation for how they approach it)

but the drawback to this is that newcomers have a steep learning curve and as a memeber of a 140k community

(showcase the reddit numbers)

we want to share our digital weaponry to more people in the world.

(can you put like a nice cute illustration?) 

and when the instruction manual to your keyboard looks like this, its no reason that people tend to think its not worth it.

miryoku layout also showcase it

I wanted to build a replacement for that using figma's design systems and also try my hand at builiding one out

Design system features
...

how many possibilities are possible, use the qmk documentation framework to explain this.

explain why its important to have high legibility in the text

Hardcore edit it to a person who doesnt even understand what keyboards are even useful for

Pasted image 20231012103042.png
Pasted image 20231012103054.png

this looks like my homework 🤮

Pasted image 20231012103611.png
Pasted image 20231012103632.png

Why are design systems cool
...

tons of layouts and tons of combinations are possible

toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right

4 variables that are possible to put

showcase the qmk documentation and how many combinations that are possible for all the entries, this is just a show off move so prolly put this in the last

irl mockup and use case

showcase the final card layout in like a nice mockup and a nice real life prototype

You can check out the layout builder on the figma community page

show the figma community page for the template

and its been getting some pretty good responses as well from the community!

show the reddit stats and the people commenting nice things.
	look at how perry wang does it.

What are all the cool things you can show in your preview?
...

  1. Showcase that you can switch layouts
    1. more layouts coming soon
    2. the toolbar on the left with the canon grid background
  2. do the math calculations and figure out all the type combinations there are in the keyboard
  3. show your custom keyboard and showcase that this is the coding way of doing it
  4. print it out and put it on the paper
  5. cuz design systems are fun
    1. explain some details like the high contrast part
    2. explain how everything is optically aligned

What are all the cool things you can show in your preview?
...

  1. Showcase that you can switch layouts
    1. more layouts coming soon
    2. the toolbar on the left with the canon grid background
  2. do the math calculations and figure out all the type combinations there are in the keyboard
  3. show your custom keyboard and showcase that this is the coding way of doing it
  4. print it out and put it on the paper
  5. cuz design systems are fun
    1. explain some details like the high contrast part
    2. explain how everything is optically aligned
Pasted image 20231012103418.png
Pasted image 20231012103411.png
Pasted image 20231012103405.png

Draft 2
...

  1. why custom keyboards are the best thing on this planet
  2. what is a big problem that people get scared with
  3. How i solved that using figma design system
    1. cool design system stuff.

A normal person should understand your passion

Would the greatest samurai of all time be given a sword from the warroom? no. he's given a specially crafted blade thats specifically crafted for his specifications.

So why do we settle for general hardware thats mass produced. That's my approach on keyboards, our entire lives are spent in a computer and our hardware is the key to the entire system.

Thats why i build custom keyboards, with custom hardware with custom software. everything built ground up put into place with intention


But theres a problem, a pretty steep learning curve and its of no help when the only instruction manual that you have looks like this
Pasted image 20231012095948.png

A bandaid solution in the community is to print out these cheat sheets that you keep near you, so that you can refer to it all times.

when you search up problems of learning a new keymap a lot of people talk about making a cheat sheet, but noone really tells you how...

theres a few ways, and almost all of them are ugly and BIG.
the best one i could find was this site called qmk configurator it was code documentation

make a mockup of a page and a card right next to each other and show how much of an improvement it is.

trust me when you pull out a big ass sheet to look for your keymaps it just looks dumb.

show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎

Whys the design system cool
...

i wanted to make it as easy as possible to make a cheat sheet for learning keymaps and i wanted to make it not obnoxiously big or embarassing while learning the keymap

I built the figma design system for this purpose, you can go in and configure almost 999999+ possibilites and its pretty cool to see the community actually exhcange their tactics and ideas for productivity workflows.

put reddit commments here that people actually liked the idea and stuff

Draft 3
...

Built by design, not by default
...

It would be foolisht to think the greatest Samurai werent given random swords from the warroom. They had custom swords built for them, designed to their exact specifications. The greatest players take help from the greatest gear to enable them to perform better.

Similarly,
Most of us earn our living through the internet, then why do we settle for subpar mass produced hardware?

I love building custom keyboards, and it revolves around the fact that i can build everything from the ground up, every piece put into place with intention, from building my own hardware, to the customizing its feel(my own modifications), to coding my own software.

show all your keyboards, the planck, the corne, the normal keyboard

Some people think it's over the top, but the feel of technology custom fit for you and only you, is something that appeals to a lot of people

showcase the reddit numbers of people


Customized solutions, customized problems...
...

But theres a problem,
a pretty steep learning curve and its of no help when the only instruction manual that you have looks like this
Pasted image 20231012095948.png

A learning resource for a new keymap a lot of people talk about, is making a cheat sheet.
but noone really tells you how...

searched around and found a few ways, and almost all of them are UGLY and BIG.
the best one i could find was this site called qmk configurator it was code documentation

make multiple mockups of how the code document looks like, make the qmk configurator page, and make the page of 

pulling out an entire 2 page printout of your keyboard to look up where a key is programmed, isnt the best solution. -_-

show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎

Whys the design system cool
...

i wanted to make it as easy as possible to make a cheat sheet for learning keymaps and i wanted to make it not obnoxiously big or embarassing while learning the keymap

I built the figma design system for this purpose, you can go in and configure almost 999999+ possibilites and its pretty cool to see the community actually exhcange their tactics and ideas for productivity workflows.

put reddit commments here that people actually liked the idea and stuff

Explain how the hobby works, how colemak dh works explain how setting up number systems for programmers is different from an accountants

show them the exisiting solutions and showcase what the trouble is

to see evverything i have to navigate through the layers.

(show a gif of this)

all the types of buttons
1u
1.5u
2u
2.5u

Show miryoku layouts that were very popular,

show barnum layouts that are also very popular

and explain why theyre principles are awesome

Why are yo ubuilding this sytem cuz theres a learning curve

What do i need for this??

Print guidelines

Pressed variants and hover states

Build a design system

Type Positioning

this ir what a very common keymap called the miryoku looks ilke in its reference map

Pasted image 20230911200758.png

Pasted image 20230911215237.png

Layout types

Row Stagger

Column stagger

some design decisions that influenced the design were that they had to be seen a far and be understood in a glance. so for this ive used high contrast values

(show them the AAA ratings of some plugin)

also for this reason all the same layer keybinds are all the same colour for easy recall and finding it

Pro Micro illustration

Make a book
with the kbdnews tags in place

Seen tons of ortho layouts but theyre horribly designed

and theyre designed in a CODE EDITOR!! which makes absolutely no sense

"Pasted image 20230907200527.png" is not created yet. Click to create.

and qmk configurator doesnt allow to see all the layers one by one

What are all the factors that will play into it

Show reddit reviews and applause

Explain the anecdote of if youre a warrior you need the weapon to built for you not the other way around.

I wanted to create and easy to use keymap cheat sheet that wouldn't be obnocisouly large or embarrassing while learning

can you give a learning analogy here

20 years ago, programming was so hard only professionals who spent years could code, nowadays theres kids leraning coding using cool interactive simple games.

This is my effort to help people explore a whole new world of productivity by helping people get a bit less scared with starting out.

Shorten this to be super crisp and precise.

Hit it hard here, the fact that theyre entire life is in front of something that you use everyday and drive this point across really sharply

I love building custom keyboards, it allows me to build everything from the ground up.
my own hardware,
my own modifications.
my own software,
every piece put into its place with intention.

People start to realize that theyre wasting their life with waste hardware, can you highlight some very important qmk features using illustrations

I want to be able to help the learning process with some cheat sheet layer reference guide

and this is how mine looks like with my setup

Draft 4
...

show a mockup of a business card with your keyboard layout on it.

Built by design, not by default
...

Many of us earn our living through the internet, then why do we rely on outdated tools and technology input devices that are mass manufactured. Just cuz its the norm, noone strays from the status quo, noone has questioned why we got so used to suffering with devices that dont suit us anymore.

show all the crazy wacky keyboards that you've built

This is why i love building custom keyboardds it allows me to build everything from the ground up.
my own hardware.
my own modification
my own software.
Every piece put into it's place with intention.

Keyboard tech has evolved to give birth to so much more superior possibilites

show that thanos gif with all the possibilities and also include the caption shown in that website.

this is barely scratching the surface of whats possible

To some people its over the top, but the feel of a device crafted for you and only you, is exciting for a lot of tech enthusiasts.

showcase the reddit numbers across custom mechanical keyboards

Customized solutions, customized problems...
...

Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isnt very helpful that the only instruction manual that you have looks like this

Pasted image 20231012095948.png

I want to help people get less scared with the technical detaisl of keyboard making, hopfully a lot more people will love the hobby the way I do!

A helpful tool for learning a new keymap is to make a cheat sheet for all the keys.

noone really tells you how to make one tho...

most of the solutions are either UGLY or BIG. :(

show the qmk document page, show code documents, show excel sheet of keymap

the best one i could find was a site that could give you printouts of your keymap. but pulling out an entire 2 page printout of your keyboard just to look up where a key is programmed isnt the best solution. -_ -

show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finnding the keymap on tha layout.

Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery


Leveraging Design Systems
...

I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.

show a mockup of the business card in real life with the keyboard also in the middle

With the Current QMK basic keycodes you should be able to do about 309234+ possibilities,

toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right

You can check out the layout builder on the figma community page

show the figma community page for the template

and its been getting some pretty good responses as well from the community!

show the reddit stats and the people commenting nice things.
	look at how perry wang does it.

shorten this, this is high impact

Pasted image 20231022024743.png
Pasted image 20231022024815.png
keyboard-layout.png

Look up more case studies that talk about design systems and all

Use this copy as a good placeholder starting

Pasted image 20231022024902.png

Draft 5
...

show a mockup of a business card with your keyboard layout on it.

Built by design, not by default
...

Many of us earn our living through the internet, then why do we rely on outdated tools and technology input devices that are mass manufactured. Just cuz its the norm, noone strays from the status quo, noone has questioned why we got so used to suffering with devices that dont suit us anymore.

show all the crazy wacky keyboards that you've built

This is why i love building custom keyboardds it allows me to build everything from the ground up.
my own hardware.
my own modification
my own software.
Every piece put into it's place with intention.

Keyboard tech has evolved to give birth to so much more superior possibilites

show that thanos gif with all the possibilities and also include the caption shown in that website.

this is barely scratching the surface of whats possible

To some people its over the top, but the feel of a device crafted for you and only you, is exciting for a lot of tech enthusiasts.

showcase the reddit numbers across custom mechanical keyboards

Customized solutions, customized problems...
...

Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isnt very helpful that the only instruction manual that you have looks like this

Pasted image 20231012095948.png

Making the hobby more friendly might help people overcome their fear of technical complexity

A helpful tool for learning a new keymap is to make a cheat sheet for all the keys.

noone really tells you how to make one tho...

most of the solutions are either UGLY or BIG. :(

show the qmk document page, show code documents, show excel sheet of keymap

the best one i could find was a site that could give you printouts of your keymap. which is a horribly inconvenient solution.

show a top down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finnding the keymap on tha layout.

Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery


Leveraging Design Systems
...

I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.

show a mockup of the business card in real life with the keyboard also in the middle

With the Current QMK basic keycodes you should be able to do about 309234+ possibilities,

toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right

You can check out the layout builder on the figma community page

show the figma community page for the template

and its been getting some pretty good responses as well from the community!

show the reddit stats and the people commenting nice things.
	look at how perry wang does it.

Draft 5_GrammarlyPassthrough
...

show a mockup of a business card with your keyboard layout on it.

Built by design, not by default
...

Many of us earn our living through the Internet. Why do we still rely on outdated hardware input devices that are mass-manufactured and slow us down?

show all the crazy wacky keyboards that you've built

This is why I love building custom keyboards it allows me to build everything from the ground up.
my hardware.
my modification.
my software.
Every piece is put into its place with intention.

Keyboard tech has evolved to give birth to so many superior possibilities

show that Thanos gif with all the possibilities and also include the caption shown on that website.

this is barely scratching the surface of what's possible

To some people, it's over the top, but the feel of a device crafted for you and only you is exciting for a lot of tech enthusiasts.

showcase the Reddit numbers across custom mechanical keyboards

Customized solutions, customized problems...
...

Seems pretty cool, but here's the problem.
There's a pretty steep learning curve and it isn't very helpful that the only instruction manual that you have looks like this

Pasted image 20231012095948.png

Making the hobby more friendly might help people overcome their fear of technical complexity

A helpful tool for learning a new keymap is to make a cheat sheet for all the keys

show the twitter and reddit comments on this topic

No one tells you how to make one tho...

most of the solutions are either UGLY or BIG. :(

show the qmk document page, show code documents, show the Excel sheet of keymap

the best one I could find was a site that could give you printouts of your keymap. which is an inconvenient solution.

show a top-down shot of me pulling out the card from my wallet and it being super cool and hand showing both sides 😎 and side frame should be me opening tons of paper and flipping through and finishing the keymap on the layout.

Some helpful resources
https/mylinktothefigmacommunity
https/aklsdjflkajsdlfk;jas
https/asdkjfklasj;kjlajjhkjh
https/qoewiruyqwuiery


Leveraging Design Systems
...

I wanted to make it as easy as possible to make a cheat sheet for learning keymaps and in a form factor that you could take anywhere.

show a mockup of the business card in real life with the keyboard in the middle

With the Current QMK basic keycodes, you should be able to do about 309234+ possibilities,

toolbar changing on the left with the canon grid background and there the layouts are changing saying the name of each change on the right

You can check out the layout builder on the Figma community page

show the Figma community page for the template

and it's been getting some pretty good responses as well from the community!

show the Reddit stats and the people commenting nice things.
	look at how perry wang does it.

Tasklist
...

  • design the graphics asset
  • find business card mockups
  • Showcase all the reddit users on different keyboard subreddits
  • show the ugly and big solutsion
    • code documents
    • excel sheet
    • keyboard layout editor
  • toolbar chanign on the left with the canon grid background and theres the layouts are changing saying the name of each change on the right
  • show the figma community page for the template
  • show the reddit stats and the people commenting nice things.
    look at how perry wang does it.

  • Take a wacky group photo of all your keyboards
  • Print out the graphics asset
    • printout all the big page keymaps
    • and the nice clean card
  • take a picture of the mockup and the keyboard in the middle IRL

  • Make the video of the paper and card comparision
  • Mobile
    • first intro picture
    • cheatsheet reddit and twitter
    • current makeshift solutions
    • kbd type mobile view
  • Make the first intro
  • setup github obsidian flow
  • Make resume ATS

I want to help people get less scared with all the technical stuff, hopefully a lot more people will take the first step then

Making the hobby more approachable might bring more people to see past the scariness of the technical complexity

Making the hobby more approachable might bring people overcome their fear of the technical complexity

Making the hobby more friendly might help people overcome their fear of all the technical complexity